<template>
    <div>
        <el-button type="primary" icon="el-icon-upload" size="small" @click="getTags">批量上传</el-button>
        <el-dialog title="批量上传" :visible.sync="dialogFormVisible" append-to-body>
            <el-form>
                <el-form-item label="选择标签" :label-width="formLabelWidth">
                    <el-select v-model="tag" placeholder="请选择标签">
                        <el-option v-for="(item,i) in tagArr" :key="i" :label="item.name" :value="item._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Json上传" :label-width="formLabelWidth">
                    <el-upload class="upload-demo" ref="upload" :limit="1" :on-exceed="tips" :on-remove="handleRemove"
                        :on-success="handle" :action="action" :on-change="onChange" :auto-upload="false"
                        :data="uploadData">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传json文件，且不超过500kb</div>
                        <el-link :href="href" type="primary" style="margin-left: 12px;">
                            示例json文件</el-link>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="manyUpload">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: {
            kind: {
                type: String,
                default: 'materials'
            },
            mid: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                formLabelWidth: '80',
                dialogFormVisible: false,
                tagArr: [],
                tag: '',
                file: {},
                uploadData: {
                    version: this.$store.state.version
                }
            }
        },
        computed: {
            action() {
                let hashMap = {
                    'foods': '/food/addMany',
                    'materials': '/material/addMany',
                    'animals': '/anim/addMany',
                    'natures': '/nature/addMany'
                }
                return process.env.VUE_APP_API == '/api' ? `http://localhost:80${hashMap[this.kind]}` : (process.env.VUE_APP_API + hashMap[this.kind])
            },
            href() {
                let hashMap = {
                    'foods': 'https://img.fireleaves.cn/SomeLabel/foods.json',
                    'materials': 'https://img.fireleaves.cn/SomeLabel/materials.json',
                    'animals': 'https://img.fireleaves.cn/SomeLabel/anims.json',
                    'natures': 'https://img.fireleaves.cn/SomeLabel/nature.json'
                }
                return hashMap[this.kind]
            }
        },
        watch: {
            fileList(newValue) {
                console.log(newValue, 'jjj')
            }
        },
        methods: {
            tips() {
                this.$message.warning('不允许多文件上传！')
            },
            onChange(file) {
                this.file = file
            },
            handleRemove() {
                this.file = {}
            },
            async getTags() {
                this.dialogFormVisible = true
                let res = await this.$store.dispatch("getTags", {
                    kind: this.kind,
                    mid: this.mid || '',
                });
                this.tagArr = res.filter((val) => {
                    return val.showType != "2";
                });
            },
            manyUpload() {
                if (!this.tag || JSON.stringify(this.file) == '{}') {
                    return this.$message.warning('请选择标签或者上传json文件')
                }
                this.uploadData.tag = this.tag
                this.$refs.upload.submit();
            },
            handle(res) {
                if (res.code == 0) {
                    this.$message.success('上传成功')
                    this.tag = ''
                    this.file = {}
                    this.dialogFormVisible = false
                } else {
                    this.$message.error(res.message)
                }
            }
        }
    }
</script>
<style lang="scss" scoped>

</style>